<script lang="ts">
import { Component, Prop, Vue } from 'vue-facing-decorator';
import UserTag from './UserTag.vue';
import type { SimpleUserInfo } from '@/api/auth/auth';

@Component({
  components: {
    UserTag,
  },
})
export default class UserLink extends Vue {
  @Prop() user!: SimpleUserInfo;
  @Prop() author!: unknown;
  get isAuthor() {
    return this.author != null && this.author !== false;
  }
}
</script>
<template>
<router-link v-if="user" :to="'/user/' + user.id" class="user-link" v-bind="$attrs">
  <slot>
    <span class="username">{{ user.name }}</span>
    <user-tag :role="user.role" v-if="user.role !== 'user'" />
    <el-icon v-if="isAuthor" class="user-author" title="本文作者"><el-icon-edit-pen /></el-icon>
  </slot>
</router-link>
</template>
<style scoped>
.user-tag {
  margin-left: 0.5em;
}
.user-author {
  margin-left: 0.5em;
  color: var(--el-text-color-regular);
}
.user-link {
  color: var(--el-color-primary);
  text-decoration: none;
}
.user-link:hover {
  text-decoration: underline;
}
</style>
